<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/PublishMenu.css">
    <script src="js/PublishMenu.js"></script>
    <script src="js/same.js"></script>
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <ul class="nav01">
            <li><a href="index.html">首页</a ></li>
            <li><a href="Menu1.html">菜谱^ </a>
                <dl>
                    <dt>  家常菜</dt>
                        <dd>热菜</dd>
                        <dd>主食</dd>
                        <dd>汤</dd>
                        <dd>早餐</dd>
                        <dd>午餐</dd> 
                        </dl>
                 <dl>
                        <dt>中国菜系 </dt>
                        <dd>粤菜</dd>
                        <dd>北菜</dd>
                        <dd>湘菜</dd>
                        <dd>浙菜</dd>
                        <dd>湖北菜</dd>
                 </dl>   
                   
            </li>
            <li><a href="heath.html">饮食健康^</a>
                <dl>
                    <dt>    <a href="heath.html">饮食健康  </a> </dt>
                        <dd>饮食新闻  </dd>
                        <dd><a href="">美容瘦身  </a> </dd>
                        <dd><a href="">饮食小常识</a></dd>
                        <dd><a href="">功能性调理</a></dd>
                        <dd><a href="">清热火    </a></dd> 
                        </dl>
                 <dl>
                        <dt> <a href="heath.html">人群膳食 </a></dt>
                        <dd>减肥</dd>
                        <dd>祛痰</dd>
                        <dd>滋阴壮阳</dd>
                        <dd>健脾养胃</dd>
                        <dd>人群膳食</dd>
                 </dl>   
                 <dl>
                    <dt> <a href="heath.html">健康常识 </a></dt>
                    <dd>减肥</dd>
                    <dd>祛痰</dd>
                    <dd>滋阴壮阳</dd>
                    <dd>健脾养胃</dd>
                    <dd>人群膳食</dd>
             </dl>
             <dl>
                <dt> <a href="heath.html">药膳养生 </a></dt>
                <dd>减肥</dd>
                <dd>祛痰</dd>
                <dd>滋阴壮阳</dd>
                <dd>健脾养胃</dd>
                <dd>人群膳食</dd>
         </dl>   
             
                 
           
                </li>
            <li><a  href="ontes.html">笔记</a></li>
          <li>  <input type="text" placeholder="搜索菜谱，菜单，食材，用户" id="text"><input type="button" value="" id="sear"></li>
            <li><input type="button" value="发布">
            <ul>
                <li><a href="PublishOntes.html">发布笔记</a ></li>
                <li><a href="PublishMenu.html">发布菜谱</a ></li>
            </ul>
            </li>
            <li style="display: block;"><a href="login.html">登录</a>|<a href="zhuce.html">注册</a></li>
             <span></span>
            <div style="clear: left;"></div>
           
            </ul>
        </div>
    <main class="">
        <div id="img">
            <img src="" alt="" id="imgadd">
            <p id="tiantu">添加菜谱成品图<br>
                (建议尺寸1280*1024，支持上传图片格式jpeg、jpg、png、gif、webp)
            </p>
        </div> 
       
        <!-- onclick、onchange按钮点击事件 -->
        <input type="file" name="" id="filetu" onchange="loadFile(this)">
        <form>
            <input type="text" placeholder="菜谱名称" id="dishName"><br>
            <select name="" class="select">
                <option value="">烹饪难度</option>
                <option value="">切墩（初级）</option>
                <option value="">配菜（中级）</option>
                <option value="">掌勺（高级）</option>
            </select>
            <select name="" class="select">
                <option value="">烹饪时间</option>
                <option value="">10分钟左右</option>
                <option value="">10-30分钟</option>
                <option value="">30-60分钟</option>
                <option value="">1个小时以上</option>
            </select><br>
            <textarea name="" class="textarea" placeholder="这道菜背后的故事~（选填）"></textarea>
        </form>
        <hr>
        <div id="foodsList">
            <h2>食材清单</h2>
            <div id="foods">
                <span id="food">食材</span>
                <span id="dosage">用量</span>
                <br>
                <div class="list">
                    <input type="text" placeholder="如：五花肉">
                    <input type="text" placeholder="如：250g">
                    <img src="images/badd.PNG" class="icon" onclick="add()">
                    <img src="images/bup.PNG" class="icon" onclick="moveup(this)">
                    <img src="images/bdown.PNG" class="icon" onclick="movedown(this)">
                    <img src="images/bdel.PNG" class="icon" onclick="del(this)">
                </div>
                <div class="list">
                    <input type="text">
                    <input type="text">
                    <img src="images/badd.PNG" class="icon" onclick="add()">
                    <img src="images/bup.PNG" class="icon" onclick="moveup(this)">
                    <img src="images/bdown.PNG" class="icon" onclick="movedown(this)">
                    <img src="images/bdel.PNG" class="icon" onclick="del(this)">
                </div>
                <div class="list">
                    <input type="text">
                    <input type="text">
                    <img src="images/badd.PNG" class="icon" onclick="add()">
                    <img src="images/bup.PNG" class="icon" onclick="moveup(this)">
                    <img src="images/bdown.PNG" class="icon" onclick="movedown(this)">
                    <img src="images/bdel.PNG" class="icon" onclick="del(this)">
                </div>
                <div class="list">
                    <input type="text">
                    <input type="text">
                    <img src="images/badd.PNG" class="icon" onclick="add()">
                    <img src="images/bup.PNG" class="icon" onclick="moveup(this)">
                    <img src="images/bdown.PNG" class="icon" onclick="movedown(this)">
                    <img src="images/bdel.PNG" class="icon" onclick="del(this)">
                </div>
            </div>
        </div>
        <hr>
        <div id="step">
            <h2>步骤<span>（支持上传图片格式有jpg、jpeg、png、gif、webp）</span></h2>
            <input type="file" name="" id="" onchange="loadFile1(this)">
            <input type="button" value="批量上传"><span>按住Ctrl键课多选，为保证您的使用体验，请单词上传图片不要超过6张</span>
            <div class="stepbox">
                <div id="imgmin">
                    <img src="" alt="" id="imgminadd">
                    <p id="imgmintu">添加步骤图</p>
                </div>
                <input type="file" name="" id="" onchange="loadFile1(this)">
                <div class="right">
                    <textarea name="" placeholder="具体步骤如下："></textarea>
                    <div id="stepicon">
                        <img src="images/bstepup.PNG" class="stepicon" onclick="stepmoveup(this)">
                        <img src="images/bstepdown.PNG" class="stepicon" onclick="stepmovedown(this)">
                        <img src="images/bstepadd.PNG" class="stepicon" onclick="stepadd()">
                        <img src="images/bstepdel.PNG" class="stepicon" onclick="stepdel(this)">
                    </div>
                </div>  
            </div>
        </div>
        <hr>
        <div id="tips">
            <h2>小贴士</h2>
            <textarea name=""></textarea>
            <input type="checkbox"">独家菜谱（此菜仅在食界发布）
        </div>
        <hr>
        <div id="button">
            <input type="button" value="上传视频">
            <input type="file" name="" id="" onchange="loadFile2(this)">
        </div>
        <div id="buttonbottom">  
            <a href="Menu1.html"><input type="submit" value="发布" id="submit"></a>
            <a href="user.html"><input type="button" value="存草稿" id="draft"></a>
        </div>
        <footer>
        <div class="foot" >
            <ul class="f1">
                <li>关于食界</li>
                <li>食界美食</li>
                <li>意见反馈</li>
                <li>品牌馆</li>
                <li>菜谱大全</li>
            </ul>
            <p>@2016-2020 欢迎访问我们食界 <a href="">唯有爱与美食不可辜负</a> </p>
        </div>
    </footer>
    </main>
    
</body>
</html>